<#assign contextPath=rc.contextPath/> <#include
"/common/__context.html"/> <#assign pageTitle="VIGOR"/> <#assign
pageBreadCrumbs>
<li class="active">在线课程</li>
</#assign> <#assign currentMenu="menu21-menu23"/>
<link type="text/css" rel="stylesheet"
	href="${contextPath}/static/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css"
	media="screen" />
<link rel="stylesheet"
	href="${contextPath}/static/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css" />
<script type="text/javascript"
	src="${contextPath}/static/plupload/js/jquery.js"></script>

<script src="${contextPath}/static/js/jquery.twbsPagination.js"></script>

<script type="text/javascript">
	function retrieveData(result) {
		$("table tbody").html("");

		var tbodyHtml = "";
		var infos = result.records;
		$
				.each(
						infos,
						function(i, value) {
							var inf = infos[i];
							tbodyHtml += '<tr>';
							tbodyHtml += '<td class="center">'
									+ inf.iid
									+ '</td><td><a href="#" target="_blank"><strong>'
									+ inf.name
									+ '</strong></a></td><td class="hidden-480">'
									+ inf.filetype
									+ '</td><td>'
									+ inf.size
									+ '</td><td><a href="javascript:;" role="show-user" data-toggle="modal" data-target="#modal" data-url="http://localhost:9999/edusoho/web/admin/user/1">'
									+ inf.upload_user
									+ '</a><br> <span class="text-muted text-sm">'
									+ inf.createtime + '</span></td>';
							tbodyHtml += '<td class="center"><div class="hidden-sm hidden-xs action-buttons"><a class="blue" href="#"> <i class="ace-icon fa fa-search-plus bigger-130"></i>详细</a> <a class="green" href="#"> <i class="ace-icon fa fa-pencil bigger-130"></i>编辑</a> <a class="red" href="#"> <i class="ace-icon fa fa-trash-o bigger-130"></i>删除</a></div></td>';
							tbodyHtml += '</tr>';
						});

		$("table tbody").append(tbodyHtml);
	}

	jQuery(function($) {
		$("#uploader").plupload({
			runtimes : 'html5,flash,silverlight,html4',
			url : "${contextPath}/info/plupload",
			// url : "pluploadservlet", //servlet版本
			// Maximum file size
			max_file_size : '10mb',
			chunk_size : '10mb',
			// Resize images on clientside if we can
			resize : {
				width : 200,
				height : 200,
				quality : 90,
				crop : true
			},
			// Specify what files to browse for
			filters : [ {
				title : "Image files",
				extensions : "jpg,gif,png"
			}, {
				title : "Zip files",
				extensions : "zip,rar"
			} ],
			// Rename files by clicking on their titles
			rename : true,
			// Sort files
			sortable : true,
			// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
			dragdrop : true,
			// Views to activate
			// Flash settings
			flash_swf_url : '${contextPath}/static/plupload/Moxie.swf',
			// Silverlight settings
			silverlight_xap_url : '${contextPath}/static/plupload/Moxie.xap'
		});

		$('#uploadModal').on('hidden.bs.modal', function(e) {
			searchInfo();
		})
	})

	function searchInfo() {
		var formDatas = $('#info-search-form').serializeArray();
		var url = "${contextPath}/info/search";
		$("#pageContext").load(url, formDatas).hide().fadeTo(1000, 1);
	}
</script>
<script type="text/javascript"
	src="${contextPath}/static/plupload/js/jquery-ui.min.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="${contextPath}/static/plupload/js/plupload.full.min.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="${contextPath}/static/plupload/js/i18n/zh_CN.js"></script>
<script type="text/javascript"
	src="${contextPath}/static/plupload/js/jquery.ui.plupload/jquery.ui.plupload.min.js"
	charset="UTF-8"></script>

<@mainContext pageTitle=pageTitle pageBreadCrumbs=pageBreadCrumbs
currentMenu=currentMenu>
<div id="messageBox"></div>
<form id="info-search-form" class="form-inline well well-sm" action=""
	method="get" novalidate="">
	<div class="form-group">
		<select class="form-control" name="filetype"> 
			<option value="">资料类型</option> <#list fileType as ft> 
			<option value="${ft}"><#if info.filetype?? &&  
			<option value="">资料类型</option> <#list fileType as ft>
			<option value="${ft}"><#if info.filetype?? && 
				info.filetype==ft>selected</#if>>${ft}</option> </#list>
		</select>
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="资料名称" name="name"
			value="${info.name?if_exists}">
	</div>
	<a href="#" class="bbtn btn-sm btn-success" onclick="searchInfo();"><i
		class="ace-icon glyphicon glyphicon-search"></i>搜索</a>

	<!-- Button trigger modal -->
	<button type="button" class="btn btn-info btn-sm pull-right"
		data-toggle="modal" data-target="#uploadModal">
		<i class="glyphicon glyphicon-cloud-upload"></i>上传资料
	</button>
</form>

<!-- Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">资料上传</h4>
			</div>
			<div class="modal-body">
				<div id="uploader">
					<p>Your browser doesn't have Flash, Silverlight or HTML5
						support.</p>
				</div>

				<div class="alert alert-info">
					<ul>
						<li>暂时只支持<strong>jpg,gif,png,zip,rar</strong>格式的文件上传，且文件大小不能超过<strong>10MB</strong>。
						</li>
						<li>资料将上传到<strong>网站服务器</strong>，如资料存在问题，请联系客服人员。
						</li>
					</ul>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success btn-sm"
					data-dismiss="modal">
					<i class="ace-icon fa fa-check"></i>完成
				</button>
			</div>
		</div>
	</div>
</div>

<!-- pageContent BEGAIN -->
<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="row">
			<div class="col-xs-12">
				<div>
					<table id="course-table" class="table table-striped table-hover">
						<thead>
							<tr>
								<th class="center">编号</th>
								<th>资料名称</th>
								<th class="hidden-480"><i
									class="ace-icon fa fa-bar-chart-o bigger-110 hidden-480"></i>类型</th>
								<th>大小</th>
								<th><i class="ace-icon fa fa-user bigger-110 hidden-480"></i>
									最后更新</th>
								<th class="center">操作</th>
							</tr>
						</thead>

						<tbody>
							<#if records??> <#list records as inf>
							<tr>
								<td class="center">${inf.iid?if_exists}</td>
								<td><a href="#" target="_blank"><strong>${inf.name?if_exists}</strong></a>
								</td>
								<td class="hidden-480">${inf.filetype?if_exists}</td>
								<td>${inf.size?if_exists}</td>
								<td><a href="javascript:;" role="show-user"
									data-toggle="modal" data-target="#modal"
									data-url="http://localhost:9999/edusoho/web/admin/user/1">${inf.upload_user?if_exists}</a>

									<br> <span class="text-muted text-sm">${inf.createtime?date}</span></td>

								<td class="center"><div
										class="hidden-sm hidden-xs action-buttons">
										<a class="blue" href="#"> <i
											class="ace-icon fa fa-share bigger-110"></i>分享
										</a> <a class="green" href="#"> <i
											class="ace-icon fa fa-pencil-square-o bigger-110"></i>编辑
										</a> <a class="red" href="#"> <i
											class="ace-icon fa fa-trash-o bigger-110"></i>删除
										</a>
									</div></td>
							</tr>
							</#list> <#else>
							<tr>
								<td colspan="20"><div class="empty center">暂无资料记录</div></td>
							</tr>
							</#if>
						</tbody>
					</table>
					<#if records??> <#include "/common/__pagination.html"/>
					<@pagination totalCounts=totalCounts pageSize=pageSize
					totalPages=totalPages searchForm="info-search-form"
					actionUrl="${contextPath}/info/list"/></#if>
				</div>
			</div>
		</div>
		<!-- PAGE CONTENT ENDS -->
	</div>
	<!-- /.col -->
</div>
<!-- pageContent END -->
</@mainContext>
